<template>
    <!-- 搜索 -->
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon><span>筛选搜索</span>
            </div>
            <div>
                <el-button @click="clickResetForm">重置</el-button>
                <el-button type="primary" @click="clickSearch">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px">
            <!-- 在input里面回车会造成刷新，大家今晚可以尝试解决一下 -->
            <!--  如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.prevent。 -->
            <!-- model  表单数据对象 -->
            <el-form ref="searchFormRef" :model="queryParams" @submit.prevent="enterSearch">
                <el-form-item prop="keyword" label="账号/姓名:" label-width="120px" porp="keyword">
                    <el-input v-model="queryParams.keyword" @change="changeKeyword"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <!-- 信息列表 -->
    <el-table :data="list" style="width: 100%">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="角色名称" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="adminCount" label="用户数" />
        <el-table-column prop="createTime" label="添加时间">
            <template #default="scope">
                <span> {{ fomatDate(scope.row.createTime) }} </span>
            </template>
        </el-table-column>
        <el-table-column prop="status" label="是否启用">
            <template #default="scope">
                <el-switch v-model="scope.row.status" :active-value="1" :deactive-value="0"></el-switch>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button link type="primary" @click="router.push(`/ums/allocResource?id=${scope.row.id}`)">分配资源
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <!-- currentPage  绑定当前页数 -->
    <!-- page-size  绑定当前一页显示多少条 -->
    <!-- total 表示一共多少页 -->
    <!-- sizes  选择一页多少条 -->
    <!-- jumper  选择跳到第几页 -->
    <ElConfigProvider :locale="zhCn">
        <el-pagination v-model:currentPage="queryParams.pageNum" v-model:page-size="queryParams.pageSize" background
            layout="prev, pager, next,total,sizes,jumper" :total="total" @size-change="changePageSize"
            @current-change="currentChagne" />
    </ElConfigProvider>
</template>
<script setup lang='ts'>
import { user } from "@/request";
import { reactive, ref, toRefs } from "vue";
import { fomatDate } from "@/utils"
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router"

const router = useRouter()

const state = reactive<{
    list: IRoleModel[];
}>({
    list: [],
});

const queryParams: IUserListParams = reactive({
    // 搜索框内容
    keyword: "",
    // 当前页数
    pageNum: 1,
    // 当前页要多少数据
    pageSize: 10,
});

// 获取表单元素
const searchFormRef = ref()

// 一共有多少条数据
const total = ref<number>(0)

const getPageList = () => {
    user.queryRoleListApi(queryParams).then((res) => {
        if (res.code === 200) {
            state.list = res.data.list;
            total.value = res.data.total
            // console.log(res.data);
        }
    });
}

getPageList()

// 改变当前一页多少条
const changePageSize = (size: number) => {
    // console.log(size);
    // console.log(queryParams.pageSize);
    getPageList()
}

// 点击第几页以及上下页的时候触发
const currentChagne = (val: Number) => {
    console.log(val);
    console.log(queryParams.pageNum);
    getPageList()
}

// 输入时发送请求
const changeKeyword = () => {
    getPageList()
}

// 点击搜索按钮
const clickSearch = () => {
    getPageList()
}

// 回车搜索
const enterSearch = () => {
    getPageList()
}

// 点击重置表单数据
const clickResetForm = () => {
    searchFormRef.value?.resetFields()
    getPageList()
}


let { list } = toRefs(state)
</script>
<style lang="less" scoped>
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;

    .flex {
        display: flex;
        justify-content: space-between;
    }
}
</style>